.<template>
    <div class="user_info" v-if="contentShow">
        <p @click="closeClick" style="position:absolute;right:0;top:0;padding:8px;cursor:pointer;">
            <img src="static/image/home/closeWindow.png" alt="">
        </p>
        <div class="info_title">
            <div class="image">
                <img style="width:64px;" draggable="false" :src="`${$store.state.headPathUrl}${userInfo.id}${userInfo.headImage}.PNG`"
                :onerror="defaultImg" />
            </div>
            <div class="name_info">
                <div class="name">{{userInfo.name}}</div>
                <input type="text" ref="beizhuInput" v-if="showEdit" @blur="inputBlur" v-model="beizhu" @keyup.enter="beizhuConfirm">
                <div class="beizhu" v-else>
                    <span>{{$parent.activeIdx == 0?userInfo.Note:userInfo.BeNote}}</span>
                    <img @click.stop="editClick" style="cursor:pointer;" src="static/image/screen/information_edit.png" alt="">
                </div>
            </div>
        </div>
        <div class="info_content">
            <p class="info">
                <span>工号</span>
                <span :title="userInfo.employeeno">{{userInfo.employeeno?userInfo.employeeno:'--'}}</span>
            </p>
            <p class="info">
                <span>性别</span>
                <span :title='userInfo.gender==1?"男":"女"'>{{userInfo.gender?userInfo.gender==1?"男":"女":'--'}}</span>
            </p>
            <p class="info">
                <span>部门</span>
                <span :title="userInfo.departmentnames">{{userInfo.departmentnames?userInfo.departmentnames:'--'}}</span>
            </p>
            <p class="info">
                <span>职务</span>
                <span :title="userInfo.jobtitle">{{userInfo.jobtitle?userInfo.jobtitle:'--'}}</span>
            </p>
            <p class="info">
                <span>手机号</span>
                <span :title="userInfo.mobile">{{userInfo.mobile?userInfo.mobile:'--'}}</span>
            </p>
            <p class="info">
                <span>邮箱</span>
                <span :title="userInfo.email">{{userInfo.email?userInfo.email:'--'}}</span>
            </p>
        </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    export default {
        props: {
            userInfo:{
                type:Object,
                default:{}
            },
		},
        data(){
            return{
                contentShow:true,
                defaultImg: 'this.src="static/image/home/person_1.png"',//zk1224修改
                showEdit:false,//显示编辑框
                beizhu:""
            }
        },
        computed:{
            ...mapState([
                "myInfo",
            ]),
        },
        methods:{
            setLAT(left,top){
                let oU=document.querySelector(".user_info")
                oU.style.left=left+"px"
                oU.style.top=top+"px"
            },
            closeClick(){
                this.contentShow=false
                this.$parent.headId = null
            },
            beizhuConfirm(){
                console.log(this.userInfo,"信息",this.$parent.activeIdx)
                this.showEdit=false;//显示编辑框
                if(this.$parent.activeIdx == 0){//修改0的备注
                    let info = this.$remoteControl("UpdateLoginInfoNote",[this.userInfo.LoginID,this.userInfo.TeamID,this.beizhu])//60
                    info = JSON.parse(info)
                    if(info.Result==0){
                        this.$parent.setNote(this.userInfo.LoginID,this.beizhu)
                    }
                    console.log(info)
                }else if(this.$parent.activeIdx == 1){//修改1的备注
                    let info = this.$remoteControl("UpdateLoginInfoBeNote",[this.myInfo.id,this.userInfo.LoginID,this.beizhu])//60
                    info = JSON.parse(info)
                    if(info.Result==0){
                        this.$parent.setBeNote(this.userInfo.LoginID,this.beizhu)
                    }
                    console.log(info)
                }
                // // this.beizhu=""
            },
            inputBlur(){
                this.showEdit=false;//显示编辑框
                this.beizhu=""
            },
            editClick(){
                this.showEdit=true
                this.beizhu = this.$parent.activeIdx == 0?this.userInfo.Note:this.userInfo.BeNote
                // this.$nextTick(()=>{
                //     console.log(this.$refs.beizhuInput)
                //     this.$refs.beizhuInput.focus()
                // })
            }
        },
        mounted(){
        }
    }
</script>
<style lang="less" scoped>
    .user_info{
        position: absolute;
        width: 300px;
        height: 330px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        z-index: 9;
        .info_title{
            height: 112px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e6e6e6;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .image{
                width: 64px;
                height: 64px;
                overflow: hidden;
                border-radius: 8px;
                margin: 0 20px;
                &>img{
                    width: 100%;
                    height: auto;
                }
            }
            .name_info{
                .name{
                    font-size: 18px;
                    color: #333;
                }
                .beizhu{
                    margin-top: 8px;
                    font-size: 12px;
                    color: #999;
                    line-height: 12px;
                    &>span{
                        display: inline-block;
                        max-width: 150px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                &>input{
                    outline: none;
                }
            }
        }
        .info_content{
            margin-top: 4px;
            overflow: hidden;
            &>p{
                margin-top: 20px;
                line-height: 12px;
                &>span{
                    font-size: 12px;
                    display: inline-block;
                    &:first-child{
                        width: 96px;
                        padding-left: 30px;
                        color: #999;
                    }
                    &:last-child{
                        color: #333;
                        width: 160px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
</style>